<template>
  <div class="home-nva">



    <swiper :options="swiperOption">
      <swiper-slide>
        <ul class="home-ul">
          <li class="home-li" v-for="(item,key) in list" v-if="key<8">
            <img  class="home-img1" :src="item.imgUrl" alt="">
            <p class="home-p">
              {{item.desc}}
            </p>
          </li>
        </ul>
      </swiper-slide>
      <swiper-slide>
        <ul class="home-ul">
          <li class="home-li" v-for="(item,key) in list" v-if="key>7">
            <img  class="home-img1" :src="item.imgUrl" alt="">
            <p class="home-p">
              {{item.desc}}
            </p>
          </li>
        </ul>
      </swiper-slide>
    </swiper>
    <div class="home-nav1">
          <p class="p1">
            定位失败
          </p>
      <p class="p1">
        必游榜单
      </p>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

    export default {
        name: "Homenva",
      components: {
        swiper,
        swiperSlide
      },
      data(){
          return{
            list:[],
            swiperOption:{


          }
          }
      },
      mounted() {
          axios.get("/api/index.json").then((res)=>{
            this.list=res.data.data.iconList

          })
      }
    }
</script>

<style lang="stylus" scoped>
.home-nva

  height:3.7rem

  .home-ul
    height:80%
    display flex
    flex-wrap wrap
  .home-li
    width 25%
    height 100%
  .home-img1
    width .9rem
    height:.9rem
    display block
    margin 0 auto
    margin-top 0.1rem
    margin-bottom 0.1rem
  .home-p

   text-align center
.home-nav1
  height:20%
  display flex
  margin-top .20rem
  justify-content space-around
  .p1
    width 50%
    text-align center
    border #ccc 0.01rem solid
    line-height .80rem
</style>
